<template>
	<view class="all-main">
		<view class="main">
			<view class="tops">
				<view class="lefts">
					<text>{{agentName}}</text>
					<text class="tels">{{agentPhone}}</text>
				</view>
				<view class="rights" @click="proShow = true">
					<text class="pro_txt">{{pro_txt}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="totals">
				<view class="headers">
					<view class="agents">
						<text>代理</text>
					</view>
					<view class="alls" @click="sortClick('allTotal')">
						<text>全部</text>
						<text v-if="sortType == 'allTotal' && sorts == 1">↑</text>
						<text v-else>↓</text>
					</view>
					<view class="actives" @click="sortClick('activeTotal')">
						<text>已激活</text>
						<text v-if="sortType == 'activeTotal' && sorts == 1">↑</text>
						<text v-else>↓</text>
					</view>
					<view class="noactives" @click="sortClick('noactive')">
						<text>未激活</text>
						<text v-if="sortType == 'noactive' && sorts == 1">↑</text>
						<text v-else>↓</text>
					</view>
					<view class="bind_noactive" @click="sortClick('bindnoactive')">
						<text>已绑定<br>未激活</text>
						<text v-if="sortType == 'bindnoactive' && sorts == 1">↑</text>
						<text v-else>↓</text>
					</view>
					<view class="operates"></view>
				</view>
				<view class="all-total">
					<view class="agents">
						全部
					</view>
					<view class="alls">
						{{allData.allTotal}}
					</view>
					<view class="actives">
						{{allData.activeTotal}}
					</view>
					<view class="noactives">
						{{allData.noactive}}
					</view>
					<view class="bind_noactive">
						{{allData.bindnoactive}}
					</view>
					<view class="operates"></view>
				</view>
				<view v-for="(item, index) in teamData" :key="index" class="items" @click="detailClick(item)">
					<view class="agents">
						{{item.name}}
					</view>
					<view class="alls">
						{{item.allTotal}}
					</view>
					<view class="actives">
						{{item.activeTotal}}
					</view>
					<view class="noactives">
						{{item.noactive}}
					</view>
					<view class="bind_noactive">
						{{item.bindnoactive}}
					</view>
					<view class="operates">
						<u-icon v-if="item.team > 1" color="#2979ff" name="arrow-right"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 产品选择 -->
		<u-picker :show="proShow" ref="uPicker" :columns="proList" keyName="label" closeOnClickOverlay
			@confirm="productSelect" @cancel="proShow = false" @close="proShow = false"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				agentId: 0,
				agentName: '',
				agentPhone: '',
				prevagentId: 0,
				prevagentName: '',
				prevagentPhone: '',
				proShow: false,
				proList: [],
				productId: 0,
				pro_txt: '全部产品',
				userInfo: {},
				sortType: 'allTotal',
				sorts: 2,
				allData: {},
				teamData: []
			}
		},
		onLoad(e) {
			this.userInfo = uni.getStorageSync('userinfo');
			if (e.agentId) {
				this.agentId = e.agentId
			} else {
				this.agentId = this.userInfo.id
			}
			if (e.name) {
				this.agentName = e.name
			} else {
				this.agentName = this.userInfo.name
			}
			if (e.phone) {
				this.agentPhone = e.phone
			} else {
				this.agentPhone = this.userInfo.phone
			}
			if (e.productId) {
				this.productId = e.productId
			}
			if (e.prevagentId) {
				this.prevagentId = e.prevagentId
			} else {
				this.prevagentId = this.userInfo.id
			}
			if (e.prevname) {
				this.prevagentName = e.prevname
			} else {
				this.prevagentName = this.userInfo.name
			}
			if (e.prevphone) {
				this.prevagentPhone = e.prevphone
			} else {
				this.prevagentPhone = this.userInfo.phone
			}
			this.getHzyProduct()
			this.loadData()
		},
		methods: {
			// 获取产品
			async getHzyProduct() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'datas/getMyProduct'
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.proList = [res.data]
					if (this.productId > 0) {
						for (var i in res.data) {
							if (this.productId == res.data[i].id) {
								this.pro_txt = res.data[i].title
							}
						}
					}
				}
			},
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'analysis/getTerminalList',
					data: {
						agentId: this.agentId,
						productId: this.productId,
						sortType: this.sortType,
						sorts: this.sorts
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.allData = res.data.allTotal
					this.teamData = res.data.teamTotal
				}
			},
			// 数据排序
			sortClick(type) {
				this.sortType = type
				if (this.sorts == 1) {
					this.sorts = 2
				} else {
					this.sorts = 1
				}
				this.loadData()
			},
			// 产品选择
			productSelect(e) {
				if (this.productId != e.value[0].id) {
					this.productId = e.value[0].id
					this.pro_txt = e.value[0].label
					this.proShow = false
					this.loadData()
				}
			},
			// 详情
			detailClick(item) {
				if (item.id > 0 && item.team > 1) {
					uni.navigateTo({
						url: '/pages/index/analysis/terminal?agentId=' + item.id + '&name=' + item.name + '&phone=' + item.phone + '&productId=' + this.productId
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			.tops {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				
				.lefts {
					display: flex;
					align-items: center;
					font-weight: bold;
					
					.tels {
						padding-left: 10rpx;
						color: #909399;
						font-size: 28rpx;
					}
				}
				
				.rights {
					display: flex;
					
					.pro_txt {
						margin-right: 10rpx;
						color: #909399;
					}
				}
			}
			
			.totals {
				margin: 0 20rpx 30rpx 20rpx;
				background-color: #ffffff;
				padding: 20rpx;
				text-align: center;
				
				.headers {
					display: flex;
					font-size: 26rpx;
					font-weight: bold;
					align-items: center;
					color: #2979ff;
					padding: 20rpx 0;
					
					.agents {
						width: 15%;
						display: flex;
					}
					
					.alls {
						width: 18%;
						display: flex;
						justify-content: center;
					}
					
					.actives {
						width: 21%;
						display: flex;
						justify-content: center;
					}
					
					.noactives {
						width: 21%;
						display: flex;
						justify-content: center;
						color: #fa3534;
					}
					
					.bind_noactive {
						width: 20%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #fa3534;
					}
					
					.operates {
						width: 5%;
						display: flex;
						justify-content: flex-end;
					}
				}
				
				.all-total {
					display: flex;
					font-size: 24rpx;
					padding: 20rpx 0;
					font-weight: bold;
					align-items: center;
					border-top: 1px solid #F2F6FC;
					
					.agents {
						width: 15%;
						text-align: left;
					}
					
					.alls {
						width: 17%;
					}
					
					.actives {
						width: 21%;
					}
					
					.noactives {
						width: 21%;
						color: #fa3534;
					}
					
					.bind_noactive {
						width: 21%;
						color: #fa3534;
					}
					
					.operates {
						width: 5%;
						display: flex;
						justify-content: flex-end;
					}
				}
				
				.items {
					display: flex;
					font-size: 24rpx;
					padding: 20rpx 0;
					align-items: center;
					border-top: 1px solid #F2F6FC;
					
					.agents {
						width: 15%;
						text-align: left;
					}
					
					.alls {
						width: 17%;
					}
					
					.actives {
						width: 21%;
					}
					
					.noactives {
						width: 21%;
						color: #fa3534;
					}
					
					.bind_noactive {
						width: 21%;
						color: #fa3534;
					}
					
					.operates {
						width: 5%;
						display: flex;
						justify-content: flex-end;
					}
				}
			}
		}
	}
</style>